<template>
  <div class="knowledge-manager">
    <el-card class="knowledge-header" :body-style="{ padding: '10px 20px' }">
      <template #header>
        <div class="header-content">
          <h2>知识库管理</h2>
          <el-button type="primary" @click="showCreateDialog">
            <el-icon><Plus /></el-icon>新建知识库
          </el-button>
        </div>
      </template>
      
      <el-tabs v-model="activeTab">
        <el-tab-pane label="知识库列表" name="list">
          <knowledge-list 
            :knowledge-list="knowledgeList"
            @edit="handleEdit"
            @delete="handleDelete"
            @select="handleSelect"
          />
        </el-tab-pane>
        <el-tab-pane label="文件管理" name="files" v-if="selectedKnowledge">
          <file-upload 
            :knowledge-id="selectedKnowledge.id"
            @upload-success="handleUploadSuccess"
          />
          <file-list 
            :files="fileList"
            :total="totalFiles"
            :current-page="currentPage"
            :page-size="pageSize"
            @page-change="handlePageChange"
            @delete-file="handleDeleteFile"
          />
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!-- 创建知识库对话框 -->
    <el-dialog
      v-model="createDialogVisible"
      title="新建知识库"
      width="500px"
    >
      <el-form :model="knowledgeForm" label-width="100px">
        <el-form-item label="知识库名称">
          <el-input v-model="knowledgeForm.name" placeholder="请输入知识库名称"/>
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            v-model="knowledgeForm.description"
            type="textarea"
            placeholder="请输入知识库描述"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="createDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleCreateKnowledge">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import KnowledgeList from './KnowledgeList.vue'
import FileUpload from './FileUpload.vue'
import FileList from './FileList.vue'
import { useKnowledgeStore } from '../stores/knowledge'

const knowledgeStore = useKnowledgeStore()
const activeTab = ref('list')
const createDialogVisible = ref(false)
const selectedKnowledge = ref(null)
const currentPage = ref(1)
const pageSize = ref(10)
const totalFiles = ref(0)
const fileList = ref([])

const knowledgeForm = reactive({
  name: '',
  description: ''
})

const knowledgeList = ref([])

// 获取知识库列表
const fetchKnowledgeList = async () => {
  try {
    const result = await knowledgeStore.getKnowledgeList()
    knowledgeList.value = result
  } catch (error) {
    ElMessage.error('获取知识库列表失败')
  }
}

// 获取文件列表
const fetchFileList = async () => {
  if (!selectedKnowledge.value) return
  try {
    const { files, total } = await knowledgeStore.getFileList({
      knowledgeId: selectedKnowledge.value.id,
      page: currentPage.value,
      pageSize: pageSize.value
    })
    fileList.value = files
    totalFiles.value = total
  } catch (error) {
    ElMessage.error('获取文件列表失败')
  }
}

// 处理知识库选择
const handleSelect = (knowledge) => {
  selectedKnowledge.value = knowledge
  activeTab.value = 'files'
  currentPage.value = 1
  fetchFileList()
}

// 显示创建对话框
const showCreateDialog = () => {
  createDialogVisible.value = true
  knowledgeForm.name = ''
  knowledgeForm.description = ''
}

// 处理知识库创建
const handleCreateKnowledge = async () => {
  try {
    await knowledgeStore.createKnowledge(knowledgeForm)
    createDialogVisible.value = false
    ElMessage.success('创建成功')
    fetchKnowledgeList()
  } catch (error) {
    ElMessage.error('创建失败')
  }
}

// 处理上传成功
const handleUploadSuccess = () => {
  fetchFileList()
}

// 处理分页变化
const handlePageChange = (page) => {
  currentPage.value = page
  fetchFileList()
}

// 处理文件删除
const handleDeleteFile = async (fileId) => {
  try {
    await knowledgeStore.deleteFile(fileId)
    ElMessage.success('删除成功')
    fetchFileList()
  } catch (error) {
    ElMessage.error('删除失败')
  }
}

// 初始化加载
fetchKnowledgeList()
</script>

<style scoped>
.knowledge-manager {
  padding: 20px;
  height: 100%;
  background: var(--el-bg-color);
}

.knowledge-header {
  height: calc(100vh - 100px);
  overflow: hidden;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content h2 {
  margin: 0;
  font-size: 20px;
  color: var(--el-text-color-primary);
}

:deep(.el-tabs__content) {
  height: calc(100vh - 220px);
  overflow-y: auto;
}
</style>
